<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>审批/请假</title>

    <!-- <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> -->

    <link rel="stylesheet" href="css/layui.css">
    <link rel="stylesheet" href="css/modules/laydate/default/laydate.css" />

    <!-- Custom fonts for this template-->
    <link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
    <link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">

    <!-- Custom styles for this template-->
    <link href="css/sb-admin-2.min.css" rel="stylesheet">

</head>

<body id="page-top">

<!-- Page Wrapper -->
<div id="wrapper">

    <!-- Sidebar -->
    <ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion" id="accordionSidebar">
        <!-- Sidebar - Brand -->
        <a class="sidebar-brand d-flex align-items-center justify-content-center" href="index.html">
            <div class="sidebar-brand-icon rotate-n-15">
                <i class="fas fa-laugh-wink"></i>
            </div>
            <div class="sidebar-brand-text mx-3">蓝天企业管理</div>
        </a>
        <!-- Divider -->
        <hr class="sidebar-divider my-0">
        <!-- Nav Item - 首页 -->
        <li class="nav-item">
            <a class="nav-link" href="index.html">
                <i class="fas fa-fw fa-tachometer-alt"></i>
                <span>首页</span></a>
        </li>
        <!-- Nav Item - 员工个人信息管理 -->
        <!--	  <li class="nav-item">-->
        <!--	    <a class="nav-link" href="information.html">-->
        <!--	      <i class="fas fa-fw fa-tachometer-alt"></i>-->
        <!--	      <span>员工个人信息管理</span></a>-->
        <!--	  </li>-->
        <!-- Nav Item - 部门管理 -->
        <li class="nav-item">
            <a class="nav-link" href="dept.html">
                <i class="fas fa-fw fa-tachometer-alt"></i>
                <span>部门管理</span></a>
        </li>
        <!-- Nav Item - 菜单管理 -->
        <li class="nav-item">
            <a class="nav-link" href="menu.html">
                <i class="fas fa-fw fa-tachometer-alt"></i>
                <span>菜单管理</span></a>
        </li>
        <!-- Nav Item - 角色管理 -->
        <li class="nav-item">
            <a class="nav-link" href="role.html">
                <i class="fas fa-fw fa-tachometer-alt"></i>
                <span>角色管理</span></a>
        </li>
        <!-- Nav Item - 用户管理 -->
        <li class="nav-item">
            <a class="nav-link" href="user.html">
                <i class="fas fa-fw fa-tachometer-alt"></i>
                <span>用户管理</span></a>
        </li>
        <!-- Nav Item - 公告管理 -->
        <li class="nav-item">
            <a class="nav-link" href="notice.html">
                <i class="fas fa-fw fa-tachometer-alt"></i>
                <span>公告管理</span></a>
        </li>


        <li class="nav-item">
            <a class="nav-link" href="log.html">
                <i class="fas fa-fw fa-tachometer-alt"></i>
                <span>日志管理</span></a>
        </li>

        <!-- Nav Item - Pages Collapse Menu -->
        <li class="nav-item">
            <a class="nav-link collapsed" href="approval.html" data-toggle="collapse" data-target="#collapsePages" aria-expanded="true" aria-controls="collapsePages">
                <i class="fas fa-fw fa-folder"></i>
                <span>审批管理</span>
            </a>
            <div id="collapsePages" class="collapse" aria-labelledby="headingPages" data-parent="#accordionSidebar">
                <div class="bg-white py-2 collapse-inner rounded">
                    <div class="collapse-divider"></div>
                    <h6 class="collapse-header">处理:</h6>
                    <a class="collapse-item" href="approval.html">已上交</a>
                    <a class="collapse-item" href="approval.html">待处理</a>
                    <a class="collapse-item" href="approval.html">已处理</a>
                    <a class="collapse-item" href="approval.html">我处理的</a>

                </div>
            </div>
        </li>

        <!-- Divider -->
        <hr class="sidebar-divider d-none d-md-block">
        <!-- Sidebar Toggler (Sidebar) -->
        <div class="text-center d-none d-md-inline">
            <button class="rounded-circle border-0" id="sidebarToggle"></button>
        </div>
    </ul>
    <!-- End of Sidebar -->
    <!-- Content Wrapper -->
    <div id="content-wrapper" class="d-flex flex-column">
        <!-- Main Content -->
        <div id="content">
            <!-- Topbar -->
            <nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow">
                <!-- Topbar Navbar -->
                <ul class="navbar-nav ml-auto">
                    <!-- Nav Item - User Information -->
                    <li class="nav-item dropdown no-arrow">
                        <a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <span class="mr-2 d-none d-lg-inline text-gray-600 small">蓝天企业管理系统</span>
                            <img class="img-profile rounded-circle" src="https://source.unsplash.com/QAB-WJcbgJk/60x60">
                        </a>
                        <!-- Dropdown - User Information -->
                        <div class="dropdown-menu dropdown-menu-right shadow animated--grow-in" aria-labelledby="userDropdown">


                            <a class="dropdown-item" href="#" data-toggle="modal" data-target="#logoutModal">
                                <i class="fas fa-sign-out-alt fa-sm fa-fw mr-2 text-gray-400"></i>
                                退出
                            </a>
                        </div>
                    </li>
                </ul>
            </nav>
            <!-- End of Topbar -->


            <!-- Begin Page Content -->
            <div class="container-fluid">
                <!-- Page Heading -->
                <h1 class="h3 mb-4 text-gray-800">审批/请假</h1>
            </div>


            <div class="layui-main">
                <div class="layui-tab layui-tab-brief" lay-filter="approval">
                    <ul class="layui-tab-title">
                        <li class="layui-this">全部</li>
                        <li data-status="1">待处理</li>
                        <li data-status="2"> </li>
                        <li data-status="3">已发起</li>
                        <li data-status="4"> </li>
                    </ul>
                    <div class="layui-tab-content">
                        <div class="layui-tab-item layui-show" style="margin: auto;padding: 50px 30px 50px 30px;">
                            <label>假勤管理</label>
                            <hr />
                            <div>
                                <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
                                    请假申请
                                </button>
                            </div>
                            <hr />
                            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                                &times;
                                            </button>
                                            <h3 class="modal-title" id="myModalLabel">
                                                请假详情填写
                                            </h3>
                                        </div>
                                        <div class="modal-body" style="width: 500px;margin: auto;">
                                            <form class="form-horizontal" role="form">
                                                <div class="form-group">
                                                    <label for="leave-type">请假类型</label>
                                                    <select class="form-control" id="leave-type">
                                                        <option>事假</option>
                                                        <option>病假</option>
                                                        <option>婚假</option>
                                                        <option>产假</option>
                                                        <option>年假</option>
                                                    </select>
                                                </div>
                                                <div class="form-group" style="width: 250px;">
                                                    <label for="start-time">开始时间</label>
                                                    <input type="text" class="layui-input" id="start-time" placeholder="请选择" />
                                                </div>
                                                <div class="form-group" style="width: 250px;">
                                                    <label for="end-time">结束时间</label>
                                                    <input type="text" class="layui-input" id="end-time" placeholder="请选择" />
                                                </div>
                                                <div class="form-group">
                                                    <label for="hours">时长(小时)</label>
                                                    <input class="form-control" id="hours" type="text" placeholder="请输入时长" disabled>
                                                </div>
                                                <div class="form-group">
                                                    <label for="leave-reason">请假原因</label>
                                                    <textarea name="" id="leave-reason" required lay-verify="required" placeholder="请输入请假原因" class="layui-textarea"></textarea>
                                                </div>
                                            </form>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-primary" onclick="reporting(1)">
                                                提交申请
                                            </button>
                                            <button type="button" class="btn btn-default" data-dismiss="modal">取消
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="layui-tab-item" style="margin: auto">
                            <div>
                                <table class="layui-table" id="approval-todo"></table>
                            </div>
                        </div>
                        <div class="layui-tab-item" style="margin: auto">
                            <div>
                                <table class="layui-table" id="approval-completed"></table>
                            </div>
                        </div>
                        <div class="layui-tab-item" style="margin: auto;">
                            <div class="layui-row">
                                <div class="layui-col-md4">
                                    <div class="layui-form" lay-filter="formData">
                                        <select id="moduleId" name="moduleId" lay-filter="type" lay-search>
                                            <option value="">选择审批类型</option>
                                            <option value="1">请假</option>
                                            <option value="2">null</option>
                                            <option value="3">null</option>
                                            <option value="4">null</option>
                                            <option value="5">null</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="layui-col-md4 layui-col-md-offset4">
                                    <div class="layui-form" id="status">
                                        <input type="radio" name="status" value="" title="全部" checked>
                                        <input type="radio" name="status" value="1" title="审批中">
                                        <input type="radio" name="status" value="2" title="已通过">
                                        <input type="radio" name="status" value="3" title="已驳回">
                                    </div>
                                </div>
                            </div>

                            <div>
                                <table class="layui-table" id="approval-all"></table>
                            </div>
                        </div>
                        <div class="layui-tab-item" style="margin: auto">
                            <div>
                                <table class="layui-table" id="approval-self"></table>
                            </div>
                        </div>
                    </div>
                    <!-- 模态框（Modal） -->
                    <div class="modal fade" id="leaveDetail" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                    <h3 class="modal-title">审批表单详情</h3>
                                </div>
                                <div class="modal-body" style="margin: 30px" id="detailData">

                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                                </div>
                            </div><!-- /.modal-content -->
                        </div><!-- /.modal -->
                    </div>
                </div>
            </div>



            <!-- /.container-fluid -->
        </div>
        <!-- End of Main Content -->
        <!-- Footer -->
        <footer class="sticky-footer bg-white">
            <div class="container my-auto">
                <div class="copyright text-center my-auto">
                    <span>蓝天企业管理系统，为企业提供最贴心的服务.<a target="_blank"></a></span>
                </div>
            </div>
        </footer>
        <!-- End of Footer -->
    </div>
    <!-- End of Content Wrapper -->
</div>
<!-- End of Page Wrapper -->

<!-- Logout Modal-->
<div class="modal fade" id="logoutModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">你确定要退出吗</h5>
                <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body">如果你确定退出该系统，请点击退出</div>
            <div class="modal-footer">
                <button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
                <a class="btn btn-primary" href="login.html">Logout</a>
            </div>
        </div>
    </div>
</div>

<!-- Scroll to Top Button-->
<a class="scroll-to-top rounded" href="#page-top">
    <i class="fas fa-angle-up"></i>
</a>
<!-- Bootstrap core JavaScript-->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Core plugin JavaScript-->
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
<!-- Custom scripts for all pages-->
<script src="js/sb-admin-2.min.js"></script>

<!--JQuery+BootStrap-->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!--axios-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<!-- 引入 layui.js 的 <script> 标签最好放置在 html 末尾 -->
<script src="js/layui.js"></script>
<!--日期选择器组件(layUi)-->
<script>
    layui.use('laydate', function() {
        let laydate = layui.laydate;
        //执行一个laydate实例
        laydate.render({
            elem: '#start-time', //基于id绑定
            type: 'datetime', //年月日时分秒选择器
            calendar: true, //显示节假日
            min: -7, //最小选择日期为7天前
            done: function(value) {
                //执行end-time日期选择器
                laydate.render({
                    elem: '#end-time',
                    type: 'datetime',
                    calendar: true,
                    min: value,
                    done: function(value) {
                        let startTime = Date.parse($('#start-time').val());
                        let endTime = Date.parse(value);
                        if (endTime < startTime) {
                            alert("结束时间不能小于开始时间");
                            return;
                        }
                        let hours = ((endTime - startTime) / 3600000).toFixed(0);
                        $("#hours").val(hours);
                    }
                });
            }
        });
    });
</script>
<!--表单提交AJAX请求-->
<script>
    function reporting(moduleId) {
        let hours = $("#hours").val();
        let startTime = $("#start-time").val();
        let endTime = $("#end-time").val();
        if (hours == NaN || hours == '' || startTime == NaN || startTime == '' || endTime == NaN || endTime == '') {
            alert("必填项不能为空!");
            return;
        } else {
            let s = ((Date.parse(endTime) - Date.parse(startTime)) / 3600000).toFixed(0);
            if (hours != s || hours < 1) {
                alert("时长有误!");
                return;
            }
        }
        let data = {
            user: {
                userName: '1647969332'
            },
            approval: {
                moduleId: moduleId
            },
            leaveDetail: {
                hours: $("#hours").val(),
                startTime: $("#start-time").val(),
                endTime: $("#end-time").val(),
                leaveReason: $("#leave-reason").val()
            }
        };
        $.ajax({
            url: '/approval/reporting',
            type: 'POST',
            contentType: 'application/json; charset=UTF-8',
            async: false,
            dataType: 'json',
            data: JSON.stringify(data),
            success: function(response) {
                alert(response.message);
                $('#myModal').modal('hide');
            }
        })
    }
</script>
<!--查询AJAX请求-->
<script>
    function getApprovals(data) {
        $(document).ready(function() {
            console.log(data);
            $.ajax({
                url: '/approval/getApprovals',
                type: "POST", //请求方式
                contentType: "application/json",
                async: true, //是否异步请求
                data: JSON.stringify(data), //data是你要提交是json字符串
                success: function(data) { //如果请求成功，返回数据。
                    var tt = data.data; //第一个data代表json,第二个data代表json里的数组或对象
                    var str1 = ""; //声明str1，防止产生undefined

                    for (var i = 0; i < tt.length; i++) { //遍历
                        var type = tt[i].moduleId;
                        var status = tt[i].status;
                        switch (type) {
                            case 1:
                                type = '请假';
                                break;
                        }
                        switch (status) {
                            case 0:
                                status = '审批中';
                                break;
                            case 1:
                                status = '通过';
                                break;
                            case 2:
                                status = '驳回';
                                break;
                        }
                        str1 += "<tr cate-id='0' fid='0'>" +
                            "<td>" + type + "</td>" +
                            "<td>" + tt[i].applicantName + "</td>" +
                            "<td>" + tt[i].createTime + "</td>" +
                            "<td>" + tt[i].approverName + "</td>" +
                            "<td>" + status + "</td>";
                    }
                    test.innerHTML = str1; //将数据写入html中
                    console.log(data.message);
                },
                error: function(arg1) {
                    alert("加载数据失败");
                    console.log(arg1);
                }
            })
        })
    }
</script>
<!--表单查询1-->
<script>
    layui.use(['jquery', 'form', 'table'], function() {
        var $ = layui.jquery,
            form = layui.form,
            table = layui.table;
        //审批表格数据
        var applicant = table.render({
            elem: '#approval-all', //对应table标签里的id
            page: false,     //开启分页
            url: 'approval/getApprovals', //从后台获取数据的url
            skin: 'line', //行边框风格
            size: 'lg', //小尺寸的表格
            toolbar: '#toolbarDemo',
            method: 'post',
            dataType: 'json',
            contentType: "application/json",
            async: true, //是否异步请求
            defaultToolbar: ['filter', 'exports', 'print'],//右上角小工具
            //请求参数
            where: {
                applicantId: '1647969332'
            },
            //获取数据后渲染
            response: {
                statusName: 'code' //规定数据状态的字段名称，默认：code
                ,statusCode: 1 //规定成功的状态码，默认：0
                ,msgName: 'msg' //规定状态信息的字段名称，默认：msg
                ,dataName: 'data' //规定数据列表的字段名称，默认：data
            },
            //返回参数解析
            parseData: function(res){ //res 即为原始返回的数据
                return {
                    "code": res.state, //解析接口状态
                    "msg": res.message, //解析提示文本
                    "data": res.data //解析数据列表
                };
            },
            cols: [
                [{
                    field: 'approvalId',
                    width: 140,
                    title: '审批编号',
                    sort: true
                }, {
                    field: 'moduleId',
                    width: 150,
                    title: '审批类型',
                    templet: '#moduleIdTpl',
                    event: 'moduleId'
                }, {
                    field: 'createTime',
                    width: 200,
                    title: '审批发起时间',
                    sort: true,
                    event: 'createTime'
                }, {
                    field: 'applicantName',
                    width: 150,
                    title: '申请人',
                    event: 'applicantName'
                }, {
                    field: 'approverName',
                    width: 150,
                    title: '当前审批人',
                    event: 'approverName'
                }, {
                    field: 'completeTime',
                    width: 200,
                    title: '审批结束时间',
                    sort: true,
                    event: 'completeTime'
                }, {
                    field: 'status',
                    width: 150,
                    title: '审批状态',
                    templet: '#statusIdTpl',
                    event: 'status'
                }]
            ],
            done: function(res, curr, count){
                //如果是异步请求数据方式，res即为你接口返回的信息。
                //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
                console.log(res);

                //得到当前页码
                console.log(curr);

                //得到数据总量
                console.log(count);
            }
        });
        //触发行双击事件
        table.on('rowDouble', function(obj){
            let userName = '1647969332';
            let approvalId = obj.data.approvalId;
            let moduleId = obj.data.moduleId;
            let data = {
                user: {
                    userName: userName
                },
                approval: {
                    approvalId: approvalId,
                    moduleId: moduleId
                }
            }
            getDetail(data);
            //obj.del(); //删除当前行
            //obj.update(fields) //修改当前行数据
        });
        form.on('select', function(){
            let moduleId = $('#moduleId').val();
            let status = $("input[type='radio']:checked").val();
            //执行重载
            applicant.reload({
                where: {
                    applicantId: '1647969332',
                    moduleId: moduleId,
                    status: status
                }
            });
        });
        form.on('radio', function(){
            let moduleId = $('#moduleId').val();
            let status = $("input[type='radio']:checked").val();
            //执行重载
            applicant.reload({
                where: {
                    applicantId: '1647969332',
                    moduleId: moduleId,
                    status: status
                }
            });
        });
    })
</script>
<!--表单查询2-->
<script>
    layui.use(['jquery', 'form', 'table'], function() {
        var $ = layui.jquery,
            table = layui.table;
        layer.msg('hello');
        //审批表格数据
        let approver = table.render({
            elem: '#approval-todo', //对应table标签里的id
            page: false,     //开启分页
            url: 'approval/getApprovals', //从后台获取数据的url
            skin: 'line', //行边框风格
            size: 'lg', //小尺寸的表格
            method: 'post',
            dataType: 'json',
            contentType: "application/json",
            async: false, //是否异步请求
            defaultToolbar: ['filter', 'exports', 'print'],//右上角小工具
            //请求参数
            where: {
                approverId: '8888888',
                status: '1'
            },
            //获取数据后渲染
            response: {
                statusName: 'code' //规定数据状态的字段名称，默认：code
                ,statusCode: 1 //规定成功的状态码，默认：0
                ,msgName: 'msg' //规定状态信息的字段名称，默认：msg
                ,dataName: 'data' //规定数据列表的字段名称，默认：data
            },
            //返回参数解析
            parseData: function(res){ //res 即为原始返回的数据
                return {
                    "code": res.state, //解析接口状态
                    "msg": res.message, //解析提示文本
                    "data": res.data //解析数据列表
                };
            },
            cols: [
                [{
                    field: 'approvalId',
                    width: 140,
                    title: '审批编号',
                    sort: true
                }, {
                    field: 'moduleId',
                    width: 150,
                    title: '审批类型',
                    templet: '#moduleIdTpl'
                }, {
                    field: 'createTime',
                    width: 200,
                    title: '审批发起时间',
                    sort: true
                }, {
                    field: 'applicantName',
                    width: 150,
                    title: '申请人'
                }, {
                    field: 'approverName',
                    width: 150,
                    title: '当前审批人'
                }, {
                    fixed: 'right',
                    width: 300,
                    align:'center',
                    toolbar: '#approval'
                }]
            ],
            //工具条事件
            done: function(res, curr, count){
                //如果是异步请求数据方式，res即为你接口返回的信息。
                //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
                console.log(res);

                //得到当前页码
                console.log(curr);

                //得到数据总量
                console.log(count);
            }
        });
        table.on('tool', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            let layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            let userName = '8888888';
            let approvalId = obj.data.approvalId;
            let moduleId = obj.data.moduleId;
            let data = {
                user: {
                    userName: userName
                },
                approval: {
                    approvalId: approvalId,
                    moduleId: moduleId
                }
            }
            if(layEvent === 'pass'){ //通过
                pass(data);
                obj.del();
            } else if(layEvent === 'reject'){ //驳回
                reject(data);
                obj.del();
            } else if(layEvent === 'detail'){ //详情
                let userName = '8888888';
                let approvalId = obj.data.approvalId;
                let moduleId = obj.data.moduleId;
                let data = {
                    user: {
                        userName: userName
                    },
                    approval: {
                        approvalId: approvalId,
                        moduleId: moduleId
                    }
                }
                getDetail(data);
            }
        });
    })
</script>
<script>
    function showModal(data) {
        $(document).ready(function() {
            console.log(data);
            if (data.moduleId == 1)
                $('#leaveDetail').modal('show');
        })
    }
    function showDetail(data){
        $(document).ready(function() {
            console.log(data);
            if (data.moduleId == 1){
                let type='';
                if (data.type==1)
                    type = '事假';
                if (data.type==2)
                    type = '病假';
                if (data.type==3)
                    type = '婚假';
                if (data.type==4)
                    type = '产假';
                if (data.type==5)
                    type = '年假';
                let startTime = data.startTime;
                let endTime = data.endTime;
                let hours = data.hours+'个小时';
                let leaveReason = data.leaveReason;
                str =
                    "<form class=\"form-horizontal\" role=\"form\">\n" +
                    "<div class=\"form-group\">\n" +
                    "<h3>请假单</h3><hr>\n"+
                    "</div>\n" +
                    "<div class=\"form-group\">\n" +
                    "<h4>请假类型:</h4>\n" + "<label>"+type+"</label><br>"+
                    "</div>\n" +
                    "<div class=\"form-group\">\n" +
                    "<h4>开始时间:</h4>\n" + "<label>"+startTime+"</label><br>"+
                    "</div>\n" +
                    "<div class=\"form-group\">\n" +
                    "<h4>结束时间:</h4>\n" + "<label>"+endTime+"</label><br>"+
                    "</div>\n" +
                    "<div class=\"form-group\">\n" +
                    "<h4>时长:</h4>\n" + "<label>"+hours+"</label><br>"+
                    "</div>\n" +
                    "<div class=\"form-group\">\n" +
                    "<h4>请假原因:</h4>\n" + "<label>"+leaveReason+"</label><br>"+
                    "</div>\n" +
                    "</form>";
                detailData.innerHTML = str;
            }
        })
    }
    function getDetail(data) {
        $(document).ready(function() {
            console.log(data);
            $.ajax({
                url: '/approval/getDetail',
                type: "POST", //请求方式
                contentType: "application/json",
                async: true, //是否异步请求
                data: JSON.stringify(data), //data是你要提交是json字符串
                success: function(data) { //如果请求成功，返回数据。
                    var detail = data.data; //第一个data代表json,第二个data代表json里的数组或对象
                    var str = ""; //声明str1，防止产生undefined
                    console.log(data);
                    str +=
                        "<lable>" + detail + "</lable>";
                    showModal(detail);
                    showDetail(detail);
                },
                error: function() {
                    alert(data.message);
                }
            })
        })
    }
    function pass(data) {
        $(document).ready(function() {
            console.log(data);
            $.ajax({
                url: '/approval/pass',
                type: "POST", //请求方式
                contentType: "application/json",
                async: true, //是否异步请求
                data: JSON.stringify(data), //data是你要提交是json字符串
                success: function(data) { //如果请求成功，返回数据。
                    alert(data.message);
                },
                error: function() {
                    alert(data.message);
                }
            })
        })
    }
    function reject(data) {
        $(document).ready(function() {
            console.log(data);
            $.ajax({
                url: '/approval/reject',
                type: "POST", //请求方式
                contentType: "application/json",
                async: true, //是否异步请求
                data: JSON.stringify(data), //data是你要提交是json字符串
                success: function(data) { //如果请求成功，返回数据。
                    alert(data.message);
                    approver.reload({});
                },
                error: function() {
                    alert(data.message);
                }
            })
        })
    }
</script>
<!--获取表单元素-->
<script>
    function getData() {
        let moduleId = $('#moduleId').val();
        let status = $("input[type='radio']:checked").val();
        let data = '{';
        data += 'applicantId:'+ "\'1647969332\'";
        data += ','+'moduleId:'+"\'"+moduleId+"\'";
        data += ','+'status:'+"\'"+status+"\'";
        data += '}';
        return data;
    }
</script>
<script type="text/html" id = 'moduleIdTpl'>
    {{# if(d.moduleId == 1){ }}
    {{}}请假审批
    {{#  }else { }}
    {{}}未开发类型
    {{#  } }}
</script>
<script type="text/html" id = 'statusIdTpl'>
    {{# if(d.status == 1){ }}
    {{}}审批中
    {{# }else if(d.status == 2){ }}
    {{}}通过
    {{# }else if(d.status == 3){ }}
    {{}}驳回
    {{# } }}

</script>

<!--审批操作工具-->
<script type="text/html" id="approval">
    <div class="layui-btn" lay-event="pass">通过</div>
    <div class="layui-btn layui-btn-danger" lay-event="reject">驳回</div>
    <div class="layui-btn layui-btn-normal" lay-event="detail">详情</div>
</script>

</body>

</html>
